<template>
    <div class="navgation" :style="{ background: store.theme.bgColor }">
        <template v-for="(item, index) in navData" :key="item.Id">
            <div class="item" @click="navClick(item)" :style="{ color: store.theme.subFontColor }">
                <span>{{ item.name }}</span>
            </div>
            <el-icon v-if="navData.length - 1 !== index" class="icon">
                <arrow-right :color="store.theme.subFontColor" />
            </el-icon>
        </template>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { mapUrlToItem } from "@/utils/mapMenus.js";
import { mainStore } from "@/store/main.js";
import { ArrowRight } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const store = mainStore();
const navData = ref(JSON.parse(localStorage.getItem("navData")) ? JSON.parse(localStorage.getItem("navData")) : []);
watch(
    () => route.path,
    (newValue) => {
        const findIndex = navData.value.findIndex((item) => item.routePath === newValue);
        if (findIndex !== -1) {
            navData.value.splice(findIndex + 1, navData.value.length - findIndex + 1);
            localStorage.setItem("navData", JSON.stringify(navData.value));
            store.navData = navData.value;
            return;
        }
        const { name, path, parentPath } = route.meta;
        const findMenuItem = mapUrlToItem(store.menu, newValue);
        const findParent = navData.value.findIndex((item) => item.routePath === parentPath);
        if (findMenuItem) {
            const parentMenuItem = store.menu.find((item) => item.id == findMenuItem.parentId);
            navData.value = [];
            navData.value.push({ name: parentMenuItem.name, routePath: parentMenuItem.routePath, query: {} });
            navData.value.push({ name: findMenuItem.name, routePath: findMenuItem.routePath, query: route.query });
        } else if (findParent === -1) {
            const findMenuItem = mapUrlToItem(store.menu, parentPath);
            const parentMenuItem = store.menu.find((item) => item.id == findMenuItem.parentId);
            navData.value = [];
            navData.value.push({ name: parentMenuItem.name, routePath: parentMenuItem.routePath, query: {} });
            navData.value.push({ name: findMenuItem.name, routePath: findMenuItem.routePath, query: {} });
            navData.value.push({ name: name, routePath: path, query: route.query });
        } else {
            navData.value.push({ name: name, routePath: path, query: route.query });
        }
        localStorage.setItem("navData", JSON.stringify(navData.value));
        store.navData = navData.value;
    },
    {
        immediate: true
    }
);
const navClick = (item) => {
    if (item.routePath) {
        if (Object.keys(item.query).length) {
            let parmas = "";
            Object.keys(item.query).forEach((key) => {
                if (item.query[key] === null) item.query[key] = "";
                parmas = parmas + key + "=" + item.query[key] + "&";
            });
            router.replace(`${item.routePath}?${parmas}`);
        } else {
            router.replace(item.routePath);
        }
    }
};
</script>

<style lang="less" scoped>
.navgation {
    display: flex;
    align-items: center;
    height: 100%;
    .item {
        height: 20px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
    }
    .icon {
        margin: 0 10px;
    }
}
</style>
